﻿<!DOCTYPE html>
<html lang="en" window-frame="solid" window-icon="./view/icon/server-favicon.ico"></html>
<head>
    <title>表单</title>
    <link rel="stylesheet" type="text/css" href="./view/css/index.css">
</head>
 <style>
        .backups input[type=checkbox],.backups span{
            line-height: 38px;
        }
        #box {
            width: 645px;
            height: 500px;
        }
        .head {
            height: 30px;
            border-bottom: 1px solid #fff;
        }
        #datastart {
            width: 400px;
        }
        #datastart select{
            width:50px;

        }
         #datastart select option{
            width:50px;

        }
        #datastart ul li {
            float: left;
        }
    </style>
<body role="window-caption">
        <div id="box">
                <!-- 模态框 -->
                <div class="addtaskmodetop skinbg" style="background-image: url(./view/img/boxbg.png);">
                        <div class="title fl" >
                            <img src="./view/img/logo_st.png" alt="" class="fl">
                            更改数据库配置
                        </div>
                        <button id="closewin" class="closewinicon topiconBg addmodeclosebtn"  style="background-image: url(./view/img/topicon.png);"></button>
                </div>
        
                <div class="addmode addtaskmode addtask layui-anim layui-anim-scale">
                    <div class="layui-form" action="" style="margin-top:20px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label" >服务器IP：</label>
                            <div class="layui-input-block">
                                <input type="text" name="sqlserver" placeholder="请输入数据库用户" class="layui-input">
                                <span class="disserverip" style="position: relative;top: 10px; font-size: 13px;color:#ff0000;">请填写正确的 服务器IP 地址</span>
                            </div>
                        </div>
                        <div class="layui-form-item period" >
                            <label class="layui-form-label" >数据库类型：</label>
                            <div class="layui-input-block">
                                <select id="sqltypedata" name="sqltype" style="width:400px;">
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" >数据库用户：</label>
                            <div class="layui-input-block">
                                <input type="text" name="mysqlname" placeholder="请输入数据库用户" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item ">
                            <label class="layui-form-label" >数据库密码：</label>
                            <div class="layui-input-block">
                                <input type="password" name="mysqlpwd" placeholder="请输入数据库密码" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item mysqlport" >
                                <label class="layui-form-label" >端口：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="port" value="3306" placeholder="请输入端口" class="layui-input">
                                </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button id="setmysql" class="layui-btn">立即提交</button>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        <script type="text/tiscript" src="./view/tiscript/index.tis"></script>
    <script type="text/tiscript" src="./view/tiscript/public.tis"></script>
    <script type="text/tiscript">
        self.ready = function() {
            
            // 数据库 类型 库
            var datajson = [
                 {   
                    category:"mysql",
                    version:"5.6",
                },
                {
                    category:"mssql",
                    version:"2008",
                },
                {
                    category:"mssql",
                    version:"2012",
                }
            ]
            var optionhtml = ""
            var selected = ""
            for(var i = 0; i < datajson.length; i++){
                    if(i == 0){
                        selected = "selected"
                    }else{
                        selected = "" 
                    }
                    var versionval = ""
                    if(datajson[i].version){
                        versionval = "版本号: "+datajson[i].version
                    }else{
                        versionval = ""
                    }
                    optionhtml += `
                        <option value="`+datajson[i].category+`_`+datajson[i].version+`" `+selected+`><span style="float: left;margin-left: 30px;">`+datajson[i].category+`</span><span style="float: right;margin-right: 30px;">`+ versionval +`</span></option>
                    `
            }
            $(input[name=sqlserver]).value = "默认服务器IP:127.0.0.1"
            $(input[name=sqlserver]).style["color"] = "#ccc"
            $(#sqltypedata).html = optionhtml
            // IP 正则 
            // 验证 IP

            $(input[name=sqlserver]).on("focus",function(){
                $(input[name=sqlserver]).style["color"] = "#000"
                if($(input[name=sqlserver]).value == "默认服务器IP:127.0.0.1"){
                    $(input[name=sqlserver]).value = ""
                }
    
            })
            var interreg=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;  

            $(.disserverip).style["display"] = "none"
            $(input[name=sqlserver]).on("blur",function(){
                var namevalue = $(input[name=sqlserver]).value

                if($(input[name=sqlserver]).value == ""){
                    $(input[name=sqlserver]).value = "默认服务器IP:127.0.0.1"
                    $(input[name=sqlserver]).style["color"] = "#ccc"
                    $(.disserverip).style["display"] = "none"
                }else{
                    var namevalue = $(input[name=sqlserver]).value
                    var reg = interreg.test(namevalue)
                    if(!reg){
                        $(input[name=sqlserver]).style["color"] = "#000"
                        $(.disserverip).style["display"] = "block"
                    }else{
                        $(.disserverip).style["display"] = "none"
                    }
                }
            })

            //消息框
            $(#setmysql).on("click", function() {
                var sqltypebox = $(select[name=sqltype]).$$(option);
                var sqltype = getSelectvalue(sqltypebox)
            
                 // 获取 数据库 类型
                var sqlname = sqltype.split("_")[0]
                // 获取 数据库 版本 
                var sqledition = sqltype.split("_")[1]
                // 服务器IP：
                var elServername = "127.0.0.1"
                if($(input[name=sqlserver]).value != "默认服务器IP:127.0.0.1"){
                    elServername = $(input[name=sqlserver]).value; 
                }
                var elMysqlname = $(input[name=mysqlname]); 
                var elPassword = $(input[name=mysqlpwd]);
                var elPort = $(input[name=port]);

                var configjson = {
                    dbuser:elMysqlname.value,
                    dbpass:elPassword.value,
                    dbserver:elServername,
                    dbport:elPort.value,
                    category:sqlname,
                    version:sqledition
                }
                var res = view.parameters["newin"].savesqlconfig(configjson)
                if (res.success){
                    view.parameters["success"]("数据库配置成功",view.parameters["fun"])
                    view.close();
                }else{
                    view.parameters["error"](res.msg)
                }
            });
            
            $(select[name=sqltype]).on("change",function(){
                if(this.value == "mssql"){
                    $(.mysqlport).style["display"] = "none"
                }else{
                    $(.mysqlport).style["display"] = "block"
                }
            })
            
        }
     
    </script> 
</body>
</html>